<template>
  <div class="container">
    <el-card>
      <!-- 头部  form表单-->
      <el-row justify="space-between">
        <el-form :inline="true" :model="fromData" class="demo-form-inline">
            <el-form-item label="关键字">
              <el-input
                v-model="fromData.keyword"
                placeholder="请输入关键字"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="fromData.state" placeholder="请选择">
                <el-option
                  v-for="(item, index) in arr"
                  :key="index"
                  :label="item"
                  :value="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="clearFn">清除</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
            <el-form-item class="addBtn">
              <el-button
                icon="el-icon-edit"
                type="success"
                @click.native="newSkillFn"
                >新增技巧</el-button
              >
            </el-form-item>
        </el-form>
      </el-row>

      <!-- 总条数 -->
      <el-row class="total">
        <el-col :span="24">
          <i class="el-icon-info" />

          数据一共 {{ total }} 条
          <div class="grid-content bg-purple-dark"></div
        ></el-col>
      </el-row>

      <!-- 表格区域 table -->
      <el-table :data="articleData" style="width: 100%">
        <el-table-column type="index" label="序号" width="60">
        </el-table-column>

        <el-table-column label="文章标题" width="200">
          <template slot-scope="scope">
            {{ scope.row.title }}
            <i
              class="el-icon-film"
              @click.prevent="watchFn(scope.row.videoURL)"
              v-if="scope.row.videoURL"
            ></i>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数" sortable width="170">
        </el-table-column>
        <el-table-column prop="username" label="录入人" width="180">
        </el-table-column>
        <el-table-column prop="createTime" label="录入时间" width="250">
        </el-table-column>
        <el-table-column
          prop="state"
          :formatter="formatterFn"
          label="状态"
          width="220"
        >
        </el-table-column>

        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="previewFn(scope.row)" type="text"
              >预览</el-button
            >
            <el-button
              type="text"
              v-text="scope.row.state === 1 ? '禁用' : '启用'"
              @click="enaOrDisFn(scope.row)"
            />
            <el-button
              type="text"
              :disabled="scope.row.state === 1"
              @click="modifyArticlesFn(scope.row.id)"
              >修改</el-button
            >
            <el-button
              type="text"
              :disabled="scope.row.state === 1"
              @click="delArticlesFn(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 视频弹框 -->
      <el-dialog title="相关视频" v-if="videoShow" :visible.sync="videoShow">
        <video autoplay style="width:100%;height:100%"  :src="videoUrl"></video>
      </el-dialog>

      <!-- 预览文章对话框 -->
      <el-dialog
        title="预览文章"
        v-if="previewArticleShow"
        :visible.sync="previewArticleShow"
      >
        <articles-preview :current-row="currentRow" />
      </el-dialog>

      <!-- 添加文章对话框 -->
      <el-dialog
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :title="isEdit ? '修改文章' : '新增文章'"
        :visible.sync="addArticleShow"
        v-if="addArticleShow"
      >
        <articles-add
          :current-id="currentId"
          :is-edit="isEdit"
          @close="closeFn"
        />
      </el-dialog>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page.sync="query.page"
        :page-sizes="[10, 15, 20, 25, 30]"
        :page-size="query.pagesize"
        layout=" prev, pager, next, sizes, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import {
  list as articlelistAPI,
  changeState as changeStateAPI,
  remove as removeAPI
} from '@/api/hmmm/articles.js'
import dayjs from 'dayjs'
import { status } from '@/api/hmmm/constants.js'
import articlesPreview from '../components/articles-preview.vue'

import articlesAdd from '../components/articles-add.vue'
export default {
  name: 'Articles',
  components: {
    articlesPreview,
    articlesAdd
  },
  data () {
    return {
      // 当前文章的id
      currentId: null,

      // 修改状态
      isEdit: false,

      // 搜索状态
      isSearch: false,

      // 当前行的数据
      currentRow: {},

      // 新增文章弹框状态
      addArticleShow: false,

      // 预览文章弹框状态
      previewArticleShow: false,

      // 视频状态
      videoShow: false,

      // 视频地址
      videoUrl: '',

      // 输入框的数据
      fromData: {
        keyword: '',
        state: null
      },

      // 状态
      arr: ['禁用', '启用'],

      // 表格数据
      articleData: [],

      //   分页
      query: {
        page: 1,
        pagesize: 10
      },

      // 总条数
      total: 0
    }
  },
  created () {
    // 获取面试数据列表
    this.getinterviewList()
  },
  methods: {
    // 删除文章
    async delArticlesFn (id) {
      const confirmRes = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      //   点击取消
      if (confirmRes === 'cancel') {
        this.$message.info('删除已取消')
      }

      // 调用删除接口
      const res = await removeAPI({ id })
      if (res.data.success) {
        this.$message.success('删除成功')
      }

      // 如果当前页面只剩一条数据,则返回上一页
      if (this.articleData.length === 1 && this.query.page !== 1) {
        this.query.page--
      }

      // 获取面试数据列表
      this.getinterviewList()
    },

    // 点击修改按钮
    modifyArticlesFn (id) {
      this.currentId = id
      // 打开修改状态
      this.isEdit = true

      //   打开弹框
      this.addArticleShow = true
    },

    // 子组件传来的关闭弹框事件
    closeFn () {
      // 关闭弹框
      this.addArticleShow = false

      // 重新获取面试数据列表
      this.getinterviewList()
    },

    // 点击新增技巧按钮
    newSkillFn () {
      //   // 关闭修改状态
      this.isEdit = false

      // 弹框显示
      this.addArticleShow = true
    },

    // 点击启用/禁用  切换
    async enaOrDisFn (row) {
      if (row.state === 1) {
        await changeStateAPI({ id: row.id, state: 0 })
      } else {
        await changeStateAPI({ id: row.id, state: 1 })
      }

      this.$message.success('操作成功')

      // 搜索超过两页,当点击启用/禁用按钮时,让页码--

      if (this.query.page !== 1 && this.articleData.length === 1) {
        this.query.page--
      }

      // 获取面试数据列表
      this.getinterviewList()
    },

    // 点击预览
    previewFn (row) {
      this.currentRow = row

      //   打开弹框
      this.previewArticleShow = true
    },

    // 观看视频
    watchFn (src) {
      // 拿到当前行的视频地址
      this.videoUrl = src

      //   让弹框显示
      this.videoShow = true
    },

    // 获取面试数据列表
    async getinterviewList () {
      // 如果是搜索状态
      if (this.isSearch) {
        const res = await articlelistAPI({ ...this.query, ...this.fromData })
        this.articleData = res.data.items
        this.total = res.data.counts
        //   时间处理
        res.data.items.forEach((item) => {
          item.createTime = dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss')
        })
      } else {
        const res = await articlelistAPI({ ...this.query })
        this.articleData = res.data.items
        this.total = res.data.counts

        //   时间处理
        res.data.items.forEach((item) => {
          item.createTime = dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss')
        })
      }
    },

    // 枚举
    formatterFn (row, column, cellValue, index) {
      const obj = status.find((item) => item.value === cellValue)
      return obj ? obj.label : '未知'
    },

    // 点击清除
    clearFn () {
      // 关闭搜索状态
      this.isSearch = false

      // 清空关键字内容
      this.fromData.keyword = ''
      this.fromData.state = null

      // 获取面试数据列表
      this.getinterviewList()
    },

    //   点击搜索
    async onSubmit () {
      // 打开搜索状态
      this.isSearch = true

      // 给input框去除空格
      this.fromData.keyword = this.fromData.keyword.trim()

      // 获取面试数据列表
      this.getinterviewList()
    },

    // 当前页面条数变化
    handleSizeChange (val) {
      this.query.pagesize = val

      // 获取面试数据列表
      this.getinterviewList()
    },

    // 当前页码变化
    handleCurrentChange (val) {
      this.query.page = val

      // 获取面试数据列表
      this.getinterviewList()
    }
  }
}
</script>

<style scoped>
.addBtn {
  float: right;
}

.total {
  background: #f5f5f5;
  height: 30px;
  line-height: 15px;
  padding: 10px;
  color: #bbb;
  border-radius: 3px;
  margin-bottom: 10px;
}

.el-pagination {
  float: right;
}

.el-icon-film {
  color: #4030ff;
}
.el-card {
    margin: 10px;
}
</style>
